<script>
// grid
	/*---------------------------------------------------------------------------------------------------------*/
	/* untuk formater beserta dkk */
	auto_nama = function(idx, ktp){
		console.log(ktp);
		try{
			if(ktp != ''){
				$.ajax({
					url: '<?=base_url();?>daftar_keluarga/get_nama_by_ktp',
					type: 'POST',
					data: {'no_ktp': ktp},
				})
				.done(function(res) {
					console.log(res);
					$('#dg_anggota_keluarga').datagrid('updateRow',{index:idx, row:{'nama':res}});
				})
				.fail(function() {
					console.log("error");
				})
				.always(function() {
					console.log("complete");
				});
			}
		}catch(e){

		}
		
	}
	set_no_ktp = function(idx, value){
		//alert('index:'+index+' | val:'+value);
		$('#dg_anggota_keluarga').datagrid('updateRow',{index:idx, row:{'no_ktp':value}});
	}
	for_no_ktp = function(value, row, index){
		return '<input value="'+value+'" onchange="set_no_ktp('+index+', this.value); auto_nama('+index+', this.value);" style="width: 100%;">';
	}

	set_nama = function(idx, value){
		//alert('index:'+index+' | val:'+value);
		$('#dg_anggota_keluarga').datagrid('updateRow',{index:idx, row:{'nama':value}});
	}
	for_nama = function(value, row, index){
		//return '<input value="'+value+'" onchange="set_jk('+index+', this.value)" style="width: 100%;">';
		return value;
		//return '<input value="'+value+'" onchange="set_nama('+index+', this.value)" style="width: 100%;">';
	}

	// init
	$('#dg_anggota_keluarga').datagrid({
		data:<?=$anggota_keluarga?>
	});

	// $('#kk').combobox('setValue', '<?php echo $kepala_keluarga;?>');

	//tombol bawah
	$(function(){
		var pager = $('#dg_anggota_keluarga').datagrid().datagrid('getPager');	// get the pager of datagrid
		pager.pagination({
			buttons:[
			{
				iconCls:'icon-add',
				text:'Tambah',
				handler:function(){
					$('#dg_anggota_keluarga').datagrid('appendRow',{
						//aksi:'',
						'no_ktp':'',
						'nama':'',
					});
				}
			},
			{
				iconCls:'icon-cancel',
				text:'Hapus',
				handler:function(){
					var row = $('#dg_anggota_keluarga').datagrid('getSelected');
					var index = $('#dg_anggota_keluarga').datagrid('getRowIndex', row);
					if(index == -1){
						alert('Pilih baris yang akan dihapus!');
					}else{
						$('#dg_anggota_keluarga').datagrid('deleteRow', index);
					}
				}
			}
			],
			layout:[],
			displayMsg:''
		});
	});

</script>
<form id="form1" method="post" style="margin:10px;">
<input name="anggota_keluarga" id="anggota_keluarga" value="" type="hidden">
	<div class="fitem" >
		<label style="width:120px">No. KK</label>:
		<input name="id_keluarga" size="15" required="true" value="<?=$id_keluarga?>">
	</div>
	<div class="fitem" >
		<label style="width:120px">Alamat </label>:
		<input name="alamat" size="20" required="true" value="<?=$alamat?>">
	</div>
	<div class="fitem" >
		<label style="width:120px">Dusun</label>:
		<select id="dusun" name="dusun">
			<?php 
				$d['value'] = $dusun;
				echo $this->mdl_prosedur->option_desa($d); 
			?>	
		</select></li>
	</div>
	<div class="fitem" >
		<label style="width:120px">RT</label>:
		<select id="rt" name="rt">
			<option value="">- Pilih -</option>
			<option value="01" <?= $rt == '01'?'selected ="selected"':''; ?>>01</option>
			<option value="02" <?= $rt == '02'?'selected ="selected"':''; ?>>02</option>
			<option value="03" <?= $rt == '03'?'selected ="selected"':''; ?>>03</option>
			<option value="04" <?= $rt == '04'?'selected ="selected"':''; ?>>04</option>
		</select></li>
	</div>
		<div class="fitem" >
		<label style="width:120px">RW</label>:
		<select id="rw" name="rw">
			<option value="">- Pilih -</option>
			<option value="01" <?= $rw == '01'?'selected ="selected"':''; ?>>01</option>
			<option value="02" <?= $rw == '02'?'selected ="selected"':''; ?>>02</option>
			<option value="03" <?= $rw == '03'?'selected ="selected"':''; ?>>03</option>
			<option value="04" <?= $rw == '04'?'selected ="selected"':''; ?>>04</option>
		</select></li>
	</div>
		</div>
		<div class="fitem" >
		<label style="width:120px">Ekonomi</label>:
		<select id="ekonomi" name="ekonomi">
			<option value="">- Pilih -</option>
			<option value="Kaya" <?= $ekonomi == 'Kaya'?'selected ="selected"':''; ?>>Kaya</option>
			<option value="Mampu" <?= $ekonomi == 'Mampu'?'selected ="selected"':''; ?>>Mampu</option>
			<option value="Cukup" <?= $ekonomi == 'Cukup'?'selected ="selected"':''; ?>>Cukup</option>
			<option value="Kurang Mampu" <?= $ekonomi == 'Kurang Mampu'?'selected ="selected"':''; ?>>Kurang Mampu</option>
			<option value="Miskin" <?= $ekonomi == 'Miskin'?'selected ="selected"':''; ?>>Miskin</option>
		</select></li>
	</div>
	<div class="fitem" >
		<label style="width:120px">Tahun Terdaftar </label>:
		<input name="thn_daftar" size="15" required="true" value="<?=$thn_daftar?>">
	</div>
	<!--div class="fitem" >
		<label style="width:120px">Kepala Keluarga </label>:
		<input name="kepala_keluarga" size="15" required="true" value="<?=$kepala_keluarga?>">
	</div-->
	<div class="fitem">
		<label style="width:120px">Kepala Keluarga </label>:
		<input id="kk" class="easyui-combogrid" name="kepala_keluarga" value="<?=isset($nama_kk)?$nama_kk:''?>" style="width:200px;" data-options="panelWidth:300, mode:'remote', hasDownArrow:false, idField:'no_ktp', textField:'nama', url:'<?=base_url();?>daftar_keluarga/list_penduduk', columns:[[
                {field:'no_ktp',title:'No. KTP',width:110},
                {field:'nama',title:'Nama',width:190}
            ]]" />
	</div>
	<div class="input_fields_wrap" >
		<label style="width:120px">Tambah Anggota keluarga </label>
		<table id="dg_anggota_keluarga" style="width:500px;height:200px"
				data-options="	rownumbers:true,
								singleSelect:true,
								autoRowHeight:true,
								pagination:true,
								pageSize:50,
								pageList:[10,20,30,40,50,100,150,200],
								fit:false
							">
			<thead>
				<tr>
					<th field="no_ktp" formatter="for_no_ktp" sortable="false" width="150">No. KTP</th>
					<th field="nama" formatter="for_nama" sortable="false" width="200" >Nama</th>

				</tr>
			</thead>
		</table>
	</div>
</form>
	

